<style lang="scss" scoped>
@import '../../.././commom/uni-nvue.scss';
	.g {
		.t {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.container {
		padding-top: 140rpx;

		.t {
			padding-left: 20rpx;
		}
	}

	.uni-form-item .title {
		padding: 20rpx 40rpx;
	}

	.form {
		width: 600rpx;
		margin: 0 auto;
	}

	.npt_title {
		display: flex;

		span {
			display: inline-block;
			margin-right: 20rpx;
			white-space: nowrap;
		}
	}
	.npt {
		.uni-input {
			width: 100%;
			border-bottom: 1rpx #ccc solid;
		}

	}
.example {
float: left;
	button {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
	}
	.submit {
		color: #fff;
	}
	.submit + button {
		color: #333;
		background: transparent;
	}
	padding-bottom: 40rpx;
	 padding-top: 28rpx;
}

.uni-input-border,
.uni-textarea-border {
	// width: 100%;
	flex: 1;
	font-size: 14px;
	color: #666;
	border: 1px #e5e5e5 solid;
	border-radius: 5px;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
}

.uni-input-border {
	padding: 0 10px;
	height: 35px;
}

.uni-textarea-border {
	padding: 10px;
	height: 80px;
}

.label-box {
	margin-right: 10px;
}

.transform-scale {
	transform: scale(0.7);
}

.button {
	margin: 5px 10px;
}
.unp {
	color: #333;
	padding-bottom: 20rpx;
	display: block;
	float: left;
	margin-right: 30rpx;
}
.tip {
	color: #999;
	font-size: 20rpx;
	display: block;
	line-height: 30rpx;
	
}
.base {
	width: 90%;
	height: 40rpx;
	border-top: 1rpx #e5e5e5 solid;
	margin:0 auto;
	padding-top: 10rpx;
	.ty {
		padding-top: 20rpx;
		height: 50rpx;
	}
}
.du {
	color: #09BB07;
	font-size: 22rpx;
	    padding-top: 32rpx;
	    display: block;
}
.imageBox {
	width: 220rpx;
	height: 220rpx;
	border:2rpx #eee solid;
	margin-left: 180rpx;
	border-radius: 5rpx;
	position: relative;
	top:-35rpx;
	.plusempty {
		position: absolute;
		top:50%;
		left: 50%;
		margin-left: -55rpx;
		margin-top:-55rpx;
	}
	.imageUrl {
		position: absolute;
		z-index: 99;
	}
}
	.clear {
    position: relative;
    left: 193rpx;
    top: -3rpx;
	}
</style>
<template>
	<view style="margin-top: -40rpx;">
		<uni-nav-bar left-icon="back" title="修改预约信息" fixed="true" shadow="false" @clickLeft="leftBack"></uni-nav-bar>
		<div class="container">
			<view class="g">
				<view class="npt">
		   <uni-forms :rules="rules" :value="formData" class="form" ref="form" validate-trigger="bind" err-show-type="undertext">
			<uni-group title="修改个人预约信息" top="0">
				<uni-forms-item name="name" required label="姓名"><uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入姓名"></uni-easyinput></uni-forms-item>
			    <uni-forms-item required name="gender" label="性别"><uni-data-checkbox v-model="formData.gender" :localdata="gender"></uni-data-checkbox></uni-forms-item>
				<uni-forms-item name="phone" required label="手机号"><uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号"></uni-easyinput></uni-forms-item>
				<uni-forms-item name="idNum" required label="身份证号"><uni-easyinput type="text" v-model="formData.idNum" placeholder="请输入身份证号"></uni-easyinput></uni-forms-item>
				<uni-forms-item name="email" required label="邮箱"><uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱"></uni-easyinput></uni-forms-item>
				<uni-forms-item name="address" required label="住址"><uni-easyinput type="text" v-model="formData.address" placeholder="请输入住址"></uni-easyinput></uni-forms-item>
				<uni-forms-item name="visitorCompany" label="公司名称"><uni-easyinput type="text" v-model="formData.visitorCompany"></uni-easyinput></uni-forms-item>
			<span class="unp">上传本人照片</span>
			 
			<uni-icons @click="clearImg" :style="{zIndex:imageUrl ? 999 : -1}" class="clear" type="clear" size="30" color="#999"></uni-icons>
			<view class="imageBox" @click="imageUpload">
				<uni-icons class="plusempty" type="plusempty" size="60" color="#eee"></uni-icons>
				<image class="imageUrl" :src="imageUrl" style="width: 100%;height: 100%;" mode="aspectFill"></image>
			</view>
			<span class="tip">采集本人无遮挡照片，便于刷脸快速通行，非必传；<br>图片支持PNG、JPG、JPEG、BMP，图片大小不超过2M</span>
			</uni-group>
			
			<uni-group title="访问信息" top="0">
				<uni-forms-item name="intervieweeName" required label="被访人姓名"> <uni-easyinput type="text" :inputBorder="true" v-model="formData.intervieweeName" placeholder="请输入姓名"></uni-easyinput> </uni-forms-item>
				<uni-forms-item required name="visitStartTime" label="来访时间"><uni-datetime-picker type="datetime" v-model="formData.visitStartTime"></uni-datetime-picker></uni-forms-item>
				<uni-forms-item required name="visitEndTime" label="结束时间"><uni-datetime-picker type="datetime" v-model="formData.visitEndTime"></uni-datetime-picker></uni-forms-item>
				<uni-forms-item name="intervieweePhone" required label="被访人手机号"><uni-easyinput type="text" v-model="formData.intervieweePhone" placeholder="请输入手机号"></uni-easyinput> </uni-forms-item>
			    <uni-forms-item name="reason" required label="来访事由"><uni-easyinput type="text" v-model="formData.reason" placeholder="请输入访问事由"></uni-easyinput></uni-forms-item>
				<uni-forms-item label="被访人公司"><uni-easyinput disabled type="text" v-model="orgId_orgId"></uni-easyinput></uni-forms-item>
				<uni-forms-item name="remark" label="备注">
					<uni-easyinput type="textarea" v-model="formData.remark" :maxlength="50" placeholder="请详细描述问题，以便相关人员了解情况"></uni-easyinput>
				</uni-forms-item>
			</uni-group>

			<view class="base">
	         <!-- <uni-forms-item style="display: flex;float: left;" required name="ty" class="ty"><uni-data-checkbox multiple v-model="formData.ty" :localdata="ty"/></uni-forms-item> -->
			 <!-- <span class="du"><navigator url="../privacy/privacy">前往阅读</navigator></span> -->
				<view class="example">
					   <button class="submit" type="primary" @click="submitForm('form')">提交</button>
					   <!-- <button type="primary"  @click="resetForm">重置表单</button> -->
				</view>
			</view>
		</uni-forms>
	</view>
			</view>
		</div>

	</view>
</template>

<script>
import { editVisitorMsg, getImageUpLoad } from '../../../api/visitor.js';
import { getImageUrl } from '../../../api/public.js'

function validPhone(phone) {
	  const reg = /^1[3456789]\d{9}$/
	  return reg.test(phone)
	}
export default {
    props: {
        formData: {
            type: Object
        }
    },
	data() {
		return {
			imageUrl: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00287-2840.jpg',
			 orgId_orgId: '华捷艾米（北京）科技有限公司',
			gender: [
				{
					text: '男',
					value: 'male'
				},
				{
					text: '女',
					value: 'female'
				},
			],
			show: false,
			rules: {
				name: {
					rules: [
						{
							required: true,
							errorMessage: '请输入姓名'
						},
						{
							minLength: 2,
							maxLength: 8,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
						}
					]
				},
				phone: {
					rules: [
						{
							required: true,
							errorMessage: '请输入手机号'
						},
						// {
						// 	pattern: /^1[3456789]\d{9}$/,
						// 	errorMessage: '请输入正确手机号'
							
						// }
					]
				},
				idNum: {
					rules: [
						{
							required: true,
							errorMessage: '请输入身份证号'
						},
						{
							minLength: 18,
							maxLength: 18,
							errorMessage: '身份证号长度为{minLength} 位'
						}
					]
				},
				email: {
					rules: [
						{
							required: true,
							errorMessage: '请输入邮箱地址'
						},
						{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址'
						}
					]
				},
				reason: {
					rules: [
						{
							required: true,
							errorMessage: '请输入访问事由'
						},
					]
				},
				address: {
					rules: [
						{
							required: true,
							errorMessage: '请输入住址'
						}
					]
				},
				visitStartTime: {
					rules: [
						{
							required: true,
							errorMessage: '请选择时间'
						}
					]
				},
				visitEndTime: {
					rules: [
						{
							required: true,
							errorMessage: '请选择时间'
						}
					]
				},
				gender: {
					rules: [
						{
							format: 'string'
						}
					]
				},
 
			}
		}
	},
	onReady() {
		this.$refs.form.setRules(this.rules)
	},
	methods: {
		leftBack() {
			let _this = this
			uni.showModal({
				title: '要退出修改么',
				success: function () {
					   _this.$emit('refresh');
				}
			})
		},
		imageUpload(e) {
		  uni.chooseImage({
		    success: (chooseImageRes) => {
		        const tempFilePaths = chooseImageRes.tempFilePaths;
		        uni.uploadFile({
		            url: getImageUpLoad,
		            filePath: tempFilePaths[0],
		            name: 'imagefile',
					header: {
					'content-type': 'multipart/form-data'
					},
		            success: (res) => {
						let data = JSON.parse((res.data));
							if(data.code == 0) {
							uni.showToast({
									title: '头像上传成功'
								});
					     	this.imageUrl = chooseImageRes.tempFilePaths[0];
							this.formData.imageId = data.data
							} else {
								uni.showToast({
									title: '上传失败，请重试',
									icon: 'none'
								});
								this.imageUrl = null
							}
		            }
		        })
		    }
		})
		},
		submitForm(form) {
			this.$refs[form]
				.submit()
				.then(res => {
					uni.showLoading({
						title: '正在提交中...',
						mask: true
					});
					
						let formData = null
					if(!this.formData.imageId) {
						formData = Object.assign(this.formData,{ })
						delete formData.imageId
					} else {
						formData = this.formData
					}
					
					editVisitorMsg(formData.id, formData).then(res => {
					if(res.data.code === 0) {
						 uni.hideLoading()
						uni.showToast({
							title: '修改成功，系统审核中',
							mask: true,
							icon: 'none',
							duration: 3000
						})
						  
						  uni.setStorage({
						  	key: 'visitorName',
							data: this.formData.name
						  })
						  uni.setStorage({
						  	key: 'visitorPhone',
						  	data: this.formData.phone
						  })
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
					});
						
		 
				})
				.catch(errors => {
					console.error('验证失败：', errors)
				})
		},
		clearImg() {
			this.imageUrl = null
		}
	},
	mounted() {
		getImageUrl().then(res => this.imageUrl = res + this.formData.imageId)
	}
}
</script>